import React, { PureComponent, Fragment } from 'react';
import { Button, Tooltip } from 'antd';
import { connect } from 'dva';
import AddNewField from './components/AddNewField';
import UpdateField from './components/UpdateField';
import List from './components/List';
import AddNewRecord from './components/AddNewRecord';
import styles from './index.less';

const namespace = 'zhongzhiguanli_zhongzhijilu';
const getZhongzhiguanliZhongzhijiluListEffect = namespace + '/getZhongzhiguanliZhongzhijiluListEffect';

@connect(({
  loading,
  zhongzhiguanli_zhongzhijilu,
}) => ({
  loading,
  zhongzhiguanli_zhongzhijilu,
}))
class Index extends PureComponent {
  constructor(props) {
    super(props);
    this.addNewRecordFieldId = null; // 点击添加新土地的时候，需要添加的土地的id，用来做添加的记录的关联

    this.state = {
      updatingFieldId: 0, // 更改的土地 id
      updatingFieldArea: 0, // 更改的土地面积
      updatingFieldName: '', // 正在编辑中的土地名字
    };
  }

  handleLoadList = () => {
    this.props.dispatch({
      type: 'zhongzhiguanli_zhongzhijilu/getListEffect',
    });
  };

  resetData = () => {
    this.props.dispatch({
      type: 'zhongzhiguanli_zhongzhijilu/resetDataReducer',
    });
  };

  componentDidMount() {
    this.handleLoadList();
  }

  componentWillUnmount() {
    this.resetData();
  }

  // 点击右下角新增土地的按钮
  handleShowAddNewFieldModal = () => {
    this.addNewField.open();
  };

  showAddNewRecordModal = () => {
    this.addNewRecord.open();
  };

  // 点击编辑土地
  handlePressUpdateField = (info) => {
    this.setState({
      updatingFieldId: info.fieldId, // 更改的土地 id
      updatingFieldArea: info.area, // 更改的土地面积
      updatingFieldName: info.fieldName,
    }, this.updateField.open);
  };

  // 编辑土地的处理逻辑
  handleUpdateField = () => {
    const {
      updatingFieldId,
      updatingFieldArea,
      updatingFieldName,
    } = this.state;
    this.props.dispatch({
      type: 'zhongzhiguanli_zhongzhijilu/updateFieldEffect',
      payload: {
        data: {
          fid: updatingFieldId,
          fieldName: updatingFieldName,
          area: updatingFieldArea,
        },
      },
    });
  };

  // 删除土地
  handleDeleteField = (info) => {
    // {id: 1, fieldName: 1, area: 200, miaochuangzhengdi_time: 2, miaochuangzhengdi_cost: 500, …}
    this.props.dispatch({
      type: 'zhongzhiguanli_zhongzhijilu/deleteFieldEffect',
      payload: {
        data: {
          fid: info.fieldId,
        },
      },
    });
  };

  // 点击添加新的记录
  handleAddNewRecord = (r) => {
    const that = this;
    const newRecord = {
      ...r,
    };
    const {
      miaochuangzhengdi_time,
      shifei_time,
      bozhong_time,
      bingchongfangzhi_time,
      shouge_time,
      other_time,
    } = newRecord;
    newRecord.miaochuangzhengdi_time = miaochuangzhengdi_time && miaochuangzhengdi_time.format('YYYY-MM-DD');
    newRecord.shifei_time = shifei_time && shifei_time.format('YYYY-MM-DD');
    newRecord.bozhong_time = bozhong_time && bozhong_time.format('YYYY-MM-DD');
    newRecord.bingchongfangzhi_time = bingchongfangzhi_time && bingchongfangzhi_time.format('YYYY-MM-DD');
    newRecord.shouge_time = shouge_time && shouge_time.format('YYYY-MM-DD');
    newRecord.other_time = other_time && other_time.format('YYYY-MM-DD');

    // 将 undefined转换成 null
    // json 化会将 undefined 的数据删除
    for (let i in newRecord) {
      newRecord[i] = newRecord[i] || null;
    }

    this.props.dispatch({
      type: 'zhongzhiguanli_zhongzhijilu/addNewRecordEffect',
      payload: {
        data: {
          ...newRecord,
          fieldId: that.addNewRecordFieldId,
        },
      },
    });

    // console.log(newRecord);
    // bingchongfangzhi_cost: undefined
    // bingchongfangzhi_time: "2019-04-04"
    // bozhong_cost: undefined
    // bozhong_time: "2019-04-03"
    // miaochuangzhengdi_cost: undefined
    // miaochuangzhengdi_time: "2019-04-01"
    // other_cost: undefined
    // other_name: undefined
    // other_time: "2019-04-06"
    // shifei_cost: undefined
    // shifei_time: "2019-04-02"
    // shouge_cost: undefined
    // shouge_time: "2019-04-05"
  };

  // 点击删除记录
  handleDeleteRecord = (record) => {
    // record.id
    this.props.dispatch({
      type: 'zhongzhiguanli_zhongzhijilu/deleteRecordEffect',
      payload: {
        data: {
          id: record.id,
        },
      },
    });
  };

  render() {
    const that = this;
    const {
      loading,
      [namespace]: {
        listData,
      },
    } = this.props;
    const {
      updatingFieldName,
      updatingFieldArea,
    } = this.state;

    const addNewFieldProps = {
      handleSubmit(info) {
        that.props.dispatch({
          type: namespace + '/addNewFieldEffect',
          payload: {
            data: {
              area: info.area,
              fieldName: info.fieldName,
            },
          },
        });
      },
    };

    const updateFieldProps = {
      updatingFieldName,
      updatingFieldArea,
      handleSubmit: this.handleUpdateField,
      handleInput(type, val) {
        that.setState({
          [type]: val,
        });
      },
    };

    const listProps = {
      loading: loading.effects['zhongzhiguanli_zhongzhijilu/getListEffect'],
      listData: listData,
      handlePressAddNewRecord(record) {
        that.addNewRecordFieldId = record.fieldId;
        that.showAddNewRecordModal();
      },
      handleDelete: that.handleDeleteRecord,
      handlePressDeleteField: this.handleDeleteField,
      handlePressEditField: this.handlePressUpdateField,
    };

    const addNewRecordProps = {
      handleSubmit: that.handleAddNewRecord,
    };

    return (
      <Fragment>
        <AddNewRecord
          {...addNewRecordProps}
          wrappedComponentRef={(ref) => { this.addNewRecord = ref; }}
        />
        <AddNewField
          {...addNewFieldProps}
          ref={(ref) => { this.addNewField = ref; }}
        />
        <UpdateField
          {...updateFieldProps}
          ref={(ref) => { this.updateField = ref; }}
        />
        <List {...listProps} />
        <div className={styles.addNewFieldWrapper}>
          <Tooltip placement="top" title="新增土地">
            <Button type="primary" shape="circle" icon="plus" size="large" onClick={this.handleShowAddNewFieldModal} />
          </Tooltip>
        </div>
      </Fragment>
    );
  }
}

export default Index;
